<template>
  <el-container>
    <!-- 左侧   -->
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <div class="menuTitle">@动力云客管理系统</div>
      <el-menu
          active-text-color="#ffd04b"
          background-color="#334157"
          class="el-menu-vertical-demo"
          :default-active="currentRouterPath"
          text-color="#fff"
          style="border-right: solid 0px;"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
          :unique-opened="true">

        <el-sub-menu :index="index" v-for="(menuPermission, index) in user.menuPermissionList" :key="menuPermission.id">
          <template #title>
            <el-icon><component :is="menuPermission.icon"></component></el-icon>
            <span> {{menuPermission.name}} </span>
          </template>
          <el-menu-item v-for="subPermission in menuPermission.subPermissionList" :key="subPermission.id" :index="subPermission.url">
            <el-icon><component :is="subPermission.icon"></component></el-icon>
            {{subPermission.name}}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>

    </el-aside>


    <!-- 右侧   -->
    <el-container class="rightContent">
      <!-- 右侧 ：上  -->
      <el-header>
        <el-icon class="show" @click="showMenu">
          <Fold/>
        </el-icon>
        <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
          {{ user.name }}
          <el-icon class="el-icon--right"><arrow-down/></el-icon>
        </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>我的资料</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item divided @click="logout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <!-- 右侧 ：中  -->
      <el-main>
        <router-view v-if="isRouterAlive"/>
      </el-main>
      <!-- 右侧 ：下 -->
      <el-footer>@清静无为 2024-01-至今学生个人作品,欢迎各位老师和同学指正交流：xiaosong@aliyun.com</el-footer>
    </el-container>
  </el-container>
</template>

<script>
import {doGet} from "../http/httpRequest.js";
import {messageConfirm, messageTip, removeToken} from "../util/util.js";

export default {
  name: "DashboardView",

  data() {
    return {
      //控制左侧菜单 是否展开 false 展开 true 折叠
      isCollapse: false,
      //登录用户对象
      user: {},
      //控制仪表盘页面右侧内容体是否显示 默认true： 显示 false： 不显示
      isRouterAlive: true,
      //当前访问的路由路径
      currentRouterPath : ''
    }
  },

  //提供者
  provide() {
    return {
      //提供一个函数
      reload: () => {
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true;
        })
      },

    }
  },

  //vue的生命周期的一个函数钩子 该钩子是在渲染后执行
  mounted() {
    //加载当前登录用户
    this.loadLoginUser();
    this.loadCurrentRouterPath();
  },

  methods: {
    showMenu() {
      this.isCollapse = !this.isCollapse;
    },

    loadLoginUser() {
      doGet("/api/login/info", {}).then((rep) => {
        this.user = rep.data.data;
      });
    },

    //退出登录
    logout() {
      doGet("/api/logout", {}).then((rep) => {
        if (rep.data.code === 200) {
          removeToken();
          messageTip("退出成功", "success");
          window.location.href = "/";
        } else {
          messageConfirm(rep.data.msg + ",是否要强制退出？")
              .then(() => {
                removeToken();
                window.location.href = "/";
              }).catch(() => {
            messageTip("取消强制退出", "warning");
          })
        }
      })
    },
    //加载当前路由路径
    loadCurrentRouterPath() {
      let path = this.$route.path; //   /dashboard/activity/add
      let arr = path.split("/"); //   [  ,dashboard, activity, add]
      if (arr.length > 3) {
        this.currentRouterPath = "/" + arr[1] + "/" + arr[2];
      } else {
        this.currentRouterPath = path;
      }
    }

  }

}
</script>

<style scoped>
.el-aside {
  background: #1a1a1a;
}

.el-header {
  background: azure;
  height: 35px;
}

.el-footer {
  background: aliceblue;
  height: 35px;
  text-align: center;
  line-height: 35px;
}

.rightContent {
  height: calc(100vh);
}

.menuTitle {
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #f9f9f9;
}

.show {
  cursor: pointer;
  margin-top: 10px;
}

.el-dropdown {
  float: right;
  line-height: 35px;
}
</style>